<template>
  <div class="notebook" :class="theme">
    <h1 @click="toggleTheme">我的记事本</h1>

    <!-- 添加事项表单 -->
    <div class="add-note">
      <input
        v-model="newNote.title"
        type="text"
        placeholder="输入待办事项..."
        class="input-title"
        @keyup.enter="addNote"
      />
    </div>

    <!-- 筛选和操作按钮 -->
    <div class="controls">
      <select v-model="filter" class="filter-select">
        <option value="all">全部事项</option>
        <option value="pending">未完成</option>
        <option value="completed">已完成</option>
        <option value="cancelled">已取消</option>
      </select>
      <button @click="downloadNotes" class="action-btn">下载数据</button>
      <button @click="clearAllNotes" class="action-btn danger">清空所有</button>
    </div>

    <!-- 折叠面板 -->
    <div class="panels">
      <!-- 未完成事项 -->
      <div class="panel">
        <div class="panel-header" @click="togglePanel('pending')">
          <h3>未完成事项 ({{ pendingNotes.length }})</h3>
          <span>{{ isPendingExpanded ? "▼" : "▶" }}</span>
        </div>
        <div v-show="isPendingExpanded" class="notes-list">
          <div v-for="note in pendingNotes" :key="note.id" class="note-item">
            <input type="checkbox" @change="toggleComplete(note)" />
            <span v-if="note.isEditing">
              <input
                v-model="note.editTitle"
                @keyup.enter="saveEdit(note)"
                @blur="saveEdit(note)"
              />
            </span>
            <span v-else @dblclick="startEdit(note)">{{ note.title }}</span>
            <div class="note-actions">
              <button @click="cancelNote(note)" class="cancel-btn">取消</button>
              <button @click="deleteNote(note)" class="delete-btn">删除</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 已完成事项 -->
      <div class="panel">
        <div class="panel-header" @click="togglePanel('completed')">
          <h3>已完成事项 ({{ completedNotes.length }})</h3>
          <span>{{ isCompletedExpanded ? "▼" : "▶" }}</span>
        </div>
        <div v-show="isCompletedExpanded" class="notes-list">
          <div
            v-for="note in completedNotes"
            :key="note.id"
            class="note-item completed"
          >
            <input
              type="checkbox"
              :checked="true"
              @change="toggleComplete(note)"
            />
            <span>{{ note.title }}</span>
          </div>
        </div>
      </div>

      <!-- 已取消事项 -->
      <div class="panel">
        <div class="panel-header" @click="togglePanel('cancelled')">
          <h3>已取消事项 ({{ cancelledNotes.length }})</h3>
          <span>{{ isCancelledExpanded ? "▼" : "▶" }}</span>
        </div>
        <div v-show="isCancelledExpanded" class="notes-list">
          <div
            v-for="note in cancelledNotes"
            :key="note.id"
            class="note-item cancelled"
          >
            <span>{{ note.title }}</span>
            <button @click="restoreNote(note)" class="restore-btn">恢复</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Notebook",
  data() {
    return {
      notes: [],
      newNote: {
        title: "",
      },
      filter: "all",
      isPendingExpanded: true,
      isCompletedExpanded: true,
      isCancelledExpanded: true,
      theme: "theme-light",
      nextId: 1,
    };
  },
  computed: {
    pendingNotes() {
      return this.notes.filter((note) => !note.completed && !note.cancelled);
    },
    completedNotes() {
      return this.notes.filter((note) => note.completed);
    },
    cancelledNotes() {
      return this.notes.filter((note) => note.cancelled);
    },
  },
  methods: {
    addNote() {
      if (this.newNote.title.trim()) {
        this.notes.push({
          id: this.nextId++,
          title: this.newNote.title,
          completed: false, //是否完成
          cancelled: false, //是否取消
          isEditing: false,
          editTitle: "",
        });
        this.newNote.title = "";
        this.saveToLocalStorage();
      }
    },
    deleteNote(note) {
      const index = this.notes.findIndex((n) => n.id === note.id);
      if (index > -1) {
        this.notes.splice(index, 1);
        this.saveToLocalStorage();
      }
    },
    toggleComplete(note) {
      note.completed = !note.completed;
      note.cancelled = false;
      this.saveToLocalStorage();
    },
    cancelNote(note) {
      note.cancelled = true;
      note.completed = false;
      this.saveToLocalStorage();
    },
    restoreNote(note) {
      note.cancelled = false;
      this.saveToLocalStorage();
    },
    startEdit(note) {
      note.isEditing = true;
      note.editTitle = note.title;
    },
    saveEdit(note) {
      if (note.editTitle.trim()) {
        note.title = note.editTitle;
      }
      note.isEditing = false;
      this.saveToLocalStorage();
    },
    clearAllNotes() {
      if (confirm("确定要清空所有事项吗？")) {
        this.notes = [];
        this.saveToLocalStorage();
      }
    },
    togglePanel(panel) {
      switch (panel) {
        case "pending":
          this.isPendingExpanded = !this.isPendingExpanded;
          break;
        case "completed":
          this.isCompletedExpanded = !this.isCompletedExpanded;
          break;
        case "cancelled":
          this.isCancelledExpanded = !this.isCancelledExpanded;
          break;
      }
    },
    toggleTheme() {
      this.theme = this.theme === "theme-light" ? "theme-dark" : "theme-light";
      localStorage.setItem("theme", this.theme);
    },
    downloadNotes() {
      const content = this.notes
        .map((note) => {
          const status = note.completed
            ? "[完成]"
            : note.cancelled
            ? "[取消]"
            : "[待办]";
          return `${status} ${note.title}`;
        })
        .join("\n");

      const blob = new Blob([content], { type: "text/plain" });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "notepad.txt";
      a.click();
      window.URL.revokeObjectURL(url);
    },
    saveToLocalStorage() {
      localStorage.setItem("notes", JSON.stringify(this.notes));
      localStorage.setItem("nextId", this.nextId);
    },
    loadFromLocalStorage() {
      const savedNotes = localStorage.getItem("notes");
      const savedNextId = localStorage.getItem("nextId");
      const savedTheme = localStorage.getItem("theme");

      if (savedNotes) {
        this.notes = JSON.parse(savedNotes);
      }
      if (savedNextId) {
        this.nextId = parseInt(savedNextId);
      }
      if (savedTheme) {
        this.theme = savedTheme;
      }
    },
  },
  mounted() {
    this.loadFromLocalStorage();
  },
};
</script>

<style scoped>
.notebook {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.theme-light {
  background-color: #fff;
  color: #333;
}

.theme-dark {
  background-color: #333;
  color: #fff;
}

.controls {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.filter-select {
  padding: 8px;
  border-radius: 4px;
}

.action-btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background-color: #4caf50;
  color: white;
}

.action-btn.danger {
  background-color: #f44336;
}

.panel {
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.panel-header {
  padding: 10px;
  background-color: #f5f5f5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.note-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.note-item.completed {
  text-decoration: line-through;
  color: #888;
}

.note-item.cancelled {
  color: #888;
  font-style: italic;
}

.note-actions {
  margin-left: auto;
  display: flex;
  gap: 5px;
}

.cancel-btn,
.restore-btn {
  background-color: #ff9800;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.delete-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

.input-title {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
}

[v-cloak] {
  display: none;
}
</style>
